<template>
  <!-- 培训管理 -->
  <div v-loading="loading" class="gl_pb_20">
    <div class="gl_my_15">
      <el-row :gutter="20">
        <el-col :span="2" class="gl_fs_14 gl_ml_15" style="line-height:28px;">证书编号</el-col>
        <el-col :span="4">
          <el-input v-model="selectedMsg.CertificateNumber" clearable placeholder="请输入" size="mini" @change="getList()" />
        </el-col>
        <el-col :span="12">
          <el-button type="primary" size="mini" @click="selectData">查询</el-button>
          <el-button type="warning" size="mini" @click="resetData">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-if="tableData.length > 0">
      <el-table size="mini" :data="tableData" class="gl_table_noBorder mb_17" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%">
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="certificateName" label="证书名称" />
        <el-table-column prop="certificateTypeName" label="证书类型" />
        <el-table-column prop="certificateLevel" label="证书等级" />
        <el-table-column prop="certificateNumber" label="证书编号" />
        <el-table-column prop="examinerName" label="考官姓名" />
        <el-table-column prop="examinerNumber" label="考官编号" />
        <el-table-column prop="passTheExamDateTime" label="日期" />
        <el-table-column prop="address" label="地点" />
      </el-table>
    </div>
    <div v-else class="gl_noData">
      <p>暂无数据</p>
    </div>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="selectedMsg.Page"
        :page-size="selectedMsg.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>
<script>
import { api_GET_TrainCentreCertificateCentreCertificate } from '@/extend/api/trainswaggerApi/app.js';
import { Api_GET_TrainCentreCertificateCentreCertificateQO } from '@/lib/form/train/swaggerForm';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      selectedMsg: new Api_GET_TrainCentreCertificateCentreCertificateQO(),
      loading: false,
      totalPage: 0,
      tableData: []
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    'currentUserType': {
      handler: function(val) {
        if (!val) return;
        this.getList();
        // console.log(val);
      },
      immediate: true
    }
  },
  methods: {
    getList(page) {
      if (!(this.currentUserType && this.currentUserType.registerId)) return;
      this.loading = true;
      this.selectedMsg.RegisterId = this.currentUserType.registerId;
      this.selectedMsg.Page = page || 1;
      this.selectedMsg.SkipCount = (this.selectedMsg.Page - 1) * this.selectedMsg.MaxResultCount;
      api_GET_TrainCentreCertificateCentreCertificate(this.selectedMsg).then(res => {
        this.loading = false;
        if (res && res.items) {
          this.totalPage = res.totalCount;
          this.tableData = res.items;
        }
        if (res && res.items.length > 0) {
          this.tableData = res.items.map(item => {
            item.passTheExamDateTime = item.passTheExamDateTime.split('T')[0];
            item.address = item.address.replace('.', ' ');
            return item;
          });
          // console.log(this.tableData);
        }
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    selectData() {
      this.getList();
    },
    resetData() {
      this.selectedMsg.CertificateNumber = '';
      this.getList();
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.selectedMsg.MaxResultCount = MaxResultCount;
      this.getList();
    },
    pageIndexChange(currentPage) {
      this.getList(currentPage);
    }
  }
};
</script>
<style scoped>
</style>
